<template>
  <el-container>
    <el-aside>
      <tag-tree @selectParent="selectTag"></tag-tree>
    </el-aside>
    <el-main>
      <el-form size="mini">
        <el-form-item label="更新内容" v-if="update">
          <el-input v-model="updateContent"></el-input>
        </el-form-item>
        <el-form-item label="文件名" v-if="!update">
          <el-input v-model="formData.fileName">
            <template slot="append">md</template>
          </el-input>
        </el-form-item>
        <el-form-item label="可见类型" v-if="!update">
          <el-select placeholder="可见类型" v-model="formData.visibleType">
            <el-option
              v-for="item in this.visibleTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="左侧选择标签" v-if="!update">
          <el-tag
            style="margin-left: 5px"
            v-for="tag in tags"
            closable
            @close="closeTag(tag)">
            {{tag.name}}
          </el-tag>
        </el-form-item>
      </el-form>
      <markdown-editor ref="markdownEditor" v-model="content" :language="'zh'" height="450px" />
      <div style="text-align: right">
        <el-button style="margin-top: 5px" type="primary" @click="update ? updateFile():submit()" :disabled="hasSubmit">提交</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import MarkdownEditor from '../../../components/MarkdownEditor/index'
  import TagTree from '../../tags/components/TagTree'
  export default {
    name: 'index',
    components: { TagTree, MarkdownEditor },
    data: function() {
      return {
        content: null,
        formData: {
          fileName: null,
          visibleType: null,
        },
        visibleTypeList: [],
        tags: [

        ],
        update: false,
        fileId: null,
        updateContent: null,
        hasSubmit: false,
      }
    },
    created() {
      this.update = this.$route.params.update != null ? this.$route.params.update : this.update;
      this.fileId = this.$route.params.fileId != null ? this.$route.params.fileId : null;
      if (this.update) {
        this.getMarkdownContent(this.fileId);
      }
      this.getDictList();
    },
    methods: {
      getDictList() {
        this.$api.getDictListByType("visible_type").then(res => {
          this.visibleTypeList = res;
        });
      },
      selectTag({id, tagName}) {
        if (this.tags.filter(item => {return item.id == id}).length == 0) {
          this.tags.push({ id: id, name: tagName });
        }
      },
      closeTag(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
      },
      submit() {
        let data = new FormData();
        data.append("file",new File([new Blob([this.content], {type: 'text/plain'})], this.formData.fileName + '.md', {type: 'text/plain'}));
        data.append("fileName", this.formData.fileName + '.md');
        data.append("visibleType", this.formData.visibleType);
        data.append("tagList", this.tags.map(item => {return item.id}).join(","));
        this.$api.upload(data).then((res)=> {
          this.$message.success(res.data.message);
          this.hasSubmit = true;
        })
      },
      updateFile() {
        let data = new FormData();
        data.append("file",new File([new Blob([this.content], {type: 'text/plain'})], this.formData.fileName + '.md', {type: 'text/plain'}));
        data.append("fileId", this.fileId);
        data.append("content", this.updateContent);
        this.$api.updateFile(data).then((res)=> {
          this.$message.info(res.data.message);
        })
      },
      getMarkdownContent(id, version, applyId) {
        this.$api.getFilePlainText(id, version, applyId).then(res => {
          this.content = res.data + "";
          console.log(this.content)
        })
      }
    },
  }
</script>

<style scoped>

</style>
